<template>
  <container class="container" better-scroll>
    <div class="left-box">
      <div class="page-header">
        <span class="title-item">运维远程调度</span>
      </div>
      <div style="height: 500px;width:100%;position: relative;">
        <!-- <scroll class="scroll"> -->
        <div class="waterfall-wrapperL">
          <div
            v-for="v in 4"
            :key="v"
            @click="selectFn(v)"
            :class="{'wk_left':v == isSelect}"
          >
            <div class="repairs-box">
              <div class="repairs-icon">
                <img v-if="v == isSelect" src="../../../../assets/public/运维远程1.png" alt="我是一张图片" />
                <img v-else-if="v!=isSelect" src="../../../../assets/public/运维远程2.png" alt="我是一张图片" />
              </div>
              <div class="repairs-address" style="color:#bebebe">
                <span :class="{'wk_left':v== isSelect}" style="font-size: 20px;">江苏-南京</span>
                <p
                  :class="{'wk_left':v== isSelect}"
                  style="font-size: 15px;"
                >XXXXXXX-xxxXXX-xxxXXX-xxxXXXX区</p>
              </div>
              <div
                class="repairs-im"
                :class="{'wk_left':v== isSelect}"
                style="font-size: 14px;"
              >
                <p>xxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxx</p>
              </div>
              <!-- <div class="thead-item" style="margin-top: 5px;margin-right: 5px;">
                  <a-checkbox @change="onCheckboxChange"></a-checkbox>
              </div>-->
            </div>
          </div>
        </div>
        <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total}条记录`"
            v-model="page.current"
            :total="146"
            :defaultPageSize="page.size"
            :item-render="itemRender"
            size="small"
            @change="pagechangeFn"
          />
        </div>
        <!-- </scroll> -->
      </div>
      <div class="live-photo" style="margin: 0 auto">
        <span style="color: #606D34;">现场照片</span>
        <div>
          <div style="height:150px;position: relative">
            <scroll class="scroll">
              <div>
                <div class="waterfall-wrapper">
                  <img src="../../../../assets/现场照片.png" alt />
                  <img src="../../../../assets/现场照片.png" alt />
                  <img src="../../../../assets/现场照片.png" alt />
                  <img src="../../../../assets/现场照片.png" alt />
                </div>
              </div>
            </scroll>
          </div>
        </div>
      </div>
      <div></div>
      <div style="margin-left: 30px;">
        <!-- <a-button class="sousuo-btnclass" @click="showCont" >调度</a-button>
        <a-button class="cls-btnclass">清空条件</a-button>-->
        <a-button class="select-btn" @click="showCont">搜索</a-button>
        <a-button class="sdefault-btn">清空条件</a-button>
      </div>
    </div>
    <div class="right-map">
      <div style="height:100%">
        <el-amap class="amap-box" :amap-manager="amapManager" :events="events" :zoom="zoom" :vid="'amap-vue'"></el-amap>
      </div>
    </div>
  </container>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";

let amapManager = new AMapManager(); // 新建生成地图画布
export default {
  name: "a-map",
  data() {
    let self = this;
    return {
      form: this.$form.createForm(this, {
        name: "horizontal_login",
      }),
      moment,
      isList: false,
      show: false,
      data: [],
      page: {
        current: 1,
        size: 6,
      },
      amapManager,
      mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
      zoom: 10,
      map: "",
      isSelect: "",
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initPage();
          });
        },
      },
      dataList: [
        {
          id: 1,
          title: "xxxxxxxx烟气监测点",
          address: "上海 上海",
          cod: 124,
          toc: 124,
          andan: 124,
          totaltan: 224,
          gong: 112,
          totalxin: 224,
          totalT: 135,
          totalO: 123,
          check: true,
          lng: 118.4643,
          lat: 32.4238,
        },
        {
          id: 2,
          title: "bbbbbbbb烟气监测点",
          address: "江苏 宿迁",
          cod: 124,
          toc: 124,
          andan: 124,
          totaltan: 224,
          gong: 112,
          totalxin: 224,
          totalT: 135,
          totalO: 123,
          check: false,
          lng: 118.4543,
          lat: 32.3238,
        },
        {
          id: 3,
          title: "zzzzzzzz烟气监测点",
          address: "浙江 宁波",
          cod: 124,
          toc: 124,
          andan: 124,
          totaltan: 224,
          gong: 112,
          totalxin: 224,
          totalT: 135,
          totalO: 123,
          check: false,
          lng: 118.4433,
          lat: 32.2238,
        },
        {
          id: 4,
          title: "gggggggg烟气监测点",
          address: "江苏 台州",
          cod: 124,
          toc: 124,
          andan: 124,
          totaltan: 224,
          gong: 112,
          totalxin: 224,
          totalT: 135,
          totalO: 123,
          check: false,
          lng: 118.4213,
          lat: 32.1238,
        }
      ],
    };
  },
  methods: {
    /* 点击 */
    selectFn(index) {
      this.isSelect = index;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    onTouruChange(e) {
      console.log("current", e);
    },
    showCont: function () {
      this.show = !this.show;
      this.isList = !this.isList;
    },
    initPage() {
      this.map = this.amapManager.getMap();
      this.marker();
      this.markerList();
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.handleSubmit();
    },
    //创建ICON图标
    createIcon() {
      return new AMap.Icon({
        size: new AMap.Size(25, 34),
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-9, -3),
      });
    },
    //点击图片获取信息
    onCheckboxChange() {},
    //渲染点
    marker() {
      let icon = this.createIcon();
      //每次进来清楚marker
      this.map.clearMap();
      let marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9),
        icon: icon,
        title: "北京",
      });
      marker.on("click", function (ev) {
        console.log(ev);
      });
      this.map.add(marker);
    },
    //渲染多点
    markerList() {
      let icon = this.createIcon();
      //每次进来清楚marker
      this.map.clearMap();
      let markerList = this.dataList;
      let that = this;
      let markerArr = [];
      markerList.forEach(function (item) {
        //创建ICON图标
        var imageUrl = "";
        var widthImg = 0;
        var heightImg = 0;
        if (item.check == true) {
          imageUrl = require("../../../../assets/public/运维远程3.png");
          widthImg = 56;
          heightImg = 69;
        } else {
          imageUrl = require("../../../../assets/public/运维远程4.png");
          widthImg = 28;
          heightImg = 30;
        }
        let icon = new AMap.Icon({
          size: new AMap.Size(widthImg, heightImg),
          image: imageUrl,
          imageSize: new AMap.Size(widthImg, heightImg),
          imageOffset: new AMap.Pixel(0, 0),
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(item.lng, item.lat),
          icon: icon,
          title: item.title,
        });
        marker.on("click", function (ev) {
          console.log(ev);
        });
        markerArr.push(marker);
      });
      this.map.panTo([
        parseFloat(markerList[0]["lng"]),
        parseFloat(markerList[0]["lat"]),
      ]);
      that.map.add(markerArr);
    },
  },
  mounted() {
    document
      .querySelector(".layout-content-main")
      .classList.add("none-background");
  },
  beforeDestroy() {
    document
      .querySelector(".layout-content-main")
      .classList.remove("none-background");
  },
};
</script>
<style >
.ant-btn:hover,
.ant-btn:focus,
.ant-btn:active,
.ant-btn.active {
  text-decoration: none;
  background: none;
}
</style>
<style scoped>
.select-box {
  background: linear-gradient(#1e7151, #246369);
  background-color: rgba(31, 111, 82);
  border-radius: 9px;
}
.wk_a {
  background-color: rgba(26, 55, 50);
  border-radius: 9px;
}
.waterfall-wrapperL {
  width: 95%;
  height: 93%;
  margin-left: 12px;
  margin-top: 12px;
}
.page-box {
  margin-left: 55px;
}
.wk_left {
  color: #b7c939;
}
.wk_right {
  color: #37ddc0;
}
.wk_rightL {
  color: #207064;
}
</style>
<style scoped src="../../../../assets/style/pollution.css"></style>
<style scoped src="../../../../assets/style/pollution/exhaust.css"></style>
<style scoped lang="scss">
//运维调度
.repairs-box {
  display: flex;
  padding: 10px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  .repairs-icon {
    height: 100%;
    display: flex;
    justify-items: center;
  }
  .repairs-address {
    width: 30%;
  }
  .repairs-im {
    width: 30%;
  }
}
//现场图片
.live-photo {
  margin: 0 auto;
  width: 90%;
  border-top: 2px solid #119a83;
  span {
    display: block;
    margin: 10px 0;
  }
  .scroll {
    height: 140px;
    .waterfall-wrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      img {
        width: 49%;
      }
    }
  }
}

::v-deep .ant-form-item-label label {
  color: #9fb043;
  font-size: 18px;
}

::v-deep .ant-form-item-children input {
  background-color: #29423f;
  border: none;
  color: #bebebe;
}

::v-deep .ant-btn:hover,
::v-deep .ant-btn:focus,
::v-deep .ant-btn:active,
::v-deep .ant-btn.active {
  text-decoration: none;
  background: #37ddc0;
}

::v-deep .ant-form-item {
  margin-right: 0px;
  width: 100%;
}

::v-deep .ant-form-item-label {
  width: 22%;
}

::v-deep .ant-form-item-control-wrapper {
  width: 78%;
}

::v-deep .ant-row {
  margin-bottom: 6px;
}

::v-deep .ant-pagination-item,
::v-deep .ant-select-selection {
  background-color: #1e3230;
  border: none;
}

::v-deep .ant-pagination-item a,
::v-deep .ant-select-arrow,
::v-deep .ant-select-selection__rendered {
  color: #bebebe;
}

::v-deep .ant-pagination-prev .ant-pagination-item-link,
::v-deep .ant-pagination-next .ant-pagination-item-link {
  background-color: #1e3230;
  border: none;
  color: #bebebe;
}

::v-deep .ant-pagination-total-text {
  color: #bebebe;
}

::v-deep .waterfall-wrapper {
  overflow: hidden;
}

::v-deep .scroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 2rem; //预留foot组件
  overflow: hidden;
}

.amap-box {
  width: 100%;
  // height: calc(85vh)
  height: 100%;
}
</style>
